<template>
	<view class="box">
		<view class="top f-w">
			<view :class="active===index?'showColor':''" v-for="(item,index) of titleList" :key="index"
				@click="checkNav(index)">
				<view>{{item.title}}</view>
				<view class="bg"></view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="card" v-for="(item,index) of list" :key="index" @click="goGongGaoDetail(item.article_id)">
				<view class="title f30 bold">{{item.title}}</view>
				<view class="content hide-line">{{item.synopsis}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0, //
				page: 1, //
				isMore: true, //
				titleList: ['平台公告', '文章列表'], //
				list: []
			}
		},
		onLoad() {
			this.gettit()
		},
		onReachBottom() {
			this.getlist(this.page+1)
		},
		methods: {
			// 切换
			checkNav(index) {
				this.active = index;
				this.page = 1
				this.getlist(this.page)
				// 发送请求
			},
			goGongGaoDetail(id) {
				uni.navigateTo({
					url: '/pages/client/gonggao-detail/gonggao-detail?id=' + id
				})
			},
			gettit() {
				this.$request('article/category/lst', {}, 'GET').then(res => {
					this.titleList = res.data
					this.getlist(this.page)
				})
			},
			getlist(e) {
				let id = this.titleList[this.active].article_category_id
				this.$request('article/lst/' + id, {page:e}, 'GET').then(res => {
						if (e == 1) {
							this.list = res.data.list
						} else {
							if (res.data.list.length == 0) {
								uni.showToast({
									title: "暂无更多",
									icon: "none"
								})
								return
							}
							let list = this.list
							list = [...list, ...res.data.list]
							this.list = list
							this.page = e
						}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding: 0 30rpx;

		.top {
			padding-top: 30rpx;
			font-size: 28rpx;

			&>view {
				margin-right: 96rpx;
			}

			.bg {
				margin: 18rpx auto 0;
				width: 50rpx;
				height: 8rpx;
				background-color: #F5F5F5;
				border-radius: 4rpx;
			}

			.showColor {
				font-weight: bold;

				.bg {
					background: linear-gradient(64deg, #2BCCA5, #22B591);
				}
			}
		}

		.list {
			overflow: hidden;

			.card {
				margin: 20rpx auto 20rpx;
				padding: 30rpx;
				width: 690rpx;
				height: 190rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				box-sizing: border-box;

				.content {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
